{% extends "index.html" %}
{% block content %}

<div class="container" style="align-content: center; ">
    <div  style="padding-top: 15px;position: relative;">
  <div class="card bg-dark text-success" style="float:left; margin: 0 auto; padding:0 auto;width:23%">
    <div class="card-body" style="margin: 0 auto; padding:0 auto;">
        <i class="fa fa-heartbeat" style="color:#00FF00;">RUN:</i>
        <p id="run" style="text-align: center;margin: 0 auto;padding: 0;font-size: large">{{ args['run'] }}</p>
    </div>
  </div>
      <div class="card bg-dark text-danger" style="float:left; margin: 0 auto; padding:0 auto;width:23%">
    <div class="card-body" style="margin: 0 auto; padding:0 auto;">
        <i class="fa fa-heartbeat" style="color:red;">STOP:</i>
        <p id="stop" style="text-align: center;margin: 0 auto;padding: 0;font-size: large">{{ args['stop'] }}</p>
    </div>
  </div>
      <div class="card bg-dark text-warning" style="float:left; margin: 0 auto; padding:0 auto;width:23%">
    <div class="card-body" style="margin: 0 auto; padding:0 auto;">
        <i class="fa fa-heartbeat" style="color:yellow;">CMD:</i>
        <p id="cmdCount" style="text-align: center;margin: 0 auto;padding: 0;font-size: large">{{ args['cmdCount'] }}</p>
    </div>
  </div>
  <div class="card bg-dark text-info" style="float:left; margin: 0 auto; padding:0 auto;width:23%">
    <div class="card-body" style="margin: 0 auto; padding:0 auto;">
        <i class="fa fa-heartbeat" style="color:blue;">GROUP:</i>
        <p id="group" style="text-align: center;margin: 0 auto;padding: 0;font-size: large">{{ args['group'] }}</p>
    </div>
  </div>
  <div class="card bg-dark text-info" style="float:left; margin: 0 auto; padding:0 auto;width:8%">
    <div class="card-body" style="margin: 0 auto; ;height:91px;">
        <button id="refresh" type="button" class="btn btn-dark btn-sm"><i class="fa fa-refresh" style="color:green;font-size: 18px;"></i></button>
         <p  style="text-align: center;margin: 0 auto;padding: 0;">RE</p>
    </div>
  </div>
    </div>

<!-- 折叠面板-->
    <div class="container" style="margin-top: 120px;">
    <div id="accordion" >
{% for group in groupList %}
  <h4>{{ group }}
    <div class="progress">
    <div id="{{ group }}-on" class="progress-bar bg-success" style="width:0%">
        ON
    </div>
    <div id="{{ group }}-off" class="progress-bar bg-danger" style="width:100%">
      OFF
    </div>
    </div>
  </h4>
  <div>
    <p id="{{ group }}-content">
        hello
    </p>
  </div>
{% endfor %}


</div>
        </div>
</div>



{% endblock %}